<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<title>帐号登陆</title>
<link href="resources/css/register.css" type="text/css" rel="stylesheet" />
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="resources/js/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
.errorCla{
	display: inline-block;
	margin-bottom: 20px;
}
</style>
<script type="text/javascript">
function browserRedirect() {  
    var sUserAgent = navigator.userAgent.toLowerCase();  
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
    var bIsAndroid = sUserAgent.match(/android/i) == "android";  
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 
    var weixin = sUserAgent.match(/MicroMessenger/i) == "micromessenger";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || weixin){  
        window.location.href="./index";
    } 
}  
browserRedirect();
$(document).ready(function(){
	jQuery.validator.addMethod("userPatt", function(value, element) {
		var tel = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
		 return this.optional(element) || tel.test(value);
	}, "<em></em>只能输入数字、字母、中文和下划线");
	jQuery.validator.addMethod("pwPatt", function(value, element) {
		var tel = /^[a-zA-Z0-9]\w+$/;
		return this.optional(element) || tel.test(value);
	}, "<em></em>只能输入数字、字符和下划线");
	$("form").validate({
		onkeyup: false,
		rules: {
		    userName:{required:true,minlength:2,userPatt:true},
		    password:{required:true,minlength:6,pwPatt:true}
		},
		messages :{
			userName:{required :"<em></em>请输入用户名",minlength:"<em></em>密码不能小于2个字符"},
			password:{required :"<em></em>密码不能为空",minlength:"<em></em>密码不能小于6个字符"}
		},
		errorPlacement: function(error, element) {
			element.next().show();
			element.next().attr("class","icon icon-error");
			error.appendTo( element.next().next());
		},
	});
	
	/*--------输入框为空的情况下，点击输入框触发事件字颜色变淡,输入和退出颜色恢复---------*/
	$("input").focus(function(){//点击输入框颜色变淡
		if($(this).val()==""){$(this).css("color","rgb(192, 192, 192)");}
	});
	$("input.text").blur(function(){
		$(this).css("color","#333333");//光标退出输入框颜色恢复
		/*--------验证通过 隐藏感叹号---------*/
		if($(this).valid()){
			$(this).next().hide();
		}else{  /* 验证失败 显示感叹号 */
			$(this).next().show();
			$(this).next().attr("class","icon icon-error");	
		}
	});
	$("input").keydown(function(){//输入时颜色恢复
		$(this).css("color","#333333");
	});
}); 
</script>
</head>
<body>
<div id="topPan"><a href="index"><img src="resources/images/10285a.png" title="Zu Ji Wang" alt="Zu Ji Wang" width="204" height="57" border="0"/></a>
	<ul>
		<li style="margin-left:600px;"><a href="register">注册</a></li>
	</ul>
</div>
<div class="container" style="height:360px;">
    <ul class="tabs" id="tabs">
        <li class="on"><span class="title">登陆足迹网</span></li>
    </ul>
    <c:if test="${loginError!=null}"><div class="errorLogin">${loginError }</div></c:if>
    <div class="content">
        <div id="personal">
        	<form:form commandName="loginForm" action="login" id="loginform">
                <section class="section-form">
                    <div class="form-item form-item-group">
                        <label style=" border-top:0;">
                        	<form:input path="userName" placeholder="用户名" id="userName" class="text" minLength="2" maxlength="12"/>
                        	<form:errors path="userName" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct" id="delError"></span><span class="errorCla"></span></label>
                        <label >
                        	<form:password path="password" placeholder="密码" id="password" class="text" onpaste="return false;" maxlength="20"/>
                        	<form:errors path="password" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct"></span><span class="errorCla"></span></label>
                    </div>
                    <div>
                        <label><input tabindex="9" id="agree" name="agree" type="checkbox" checked>保持登陆状态</label>
                    </div>
                    <div>
                        <input id="btn_submit" class="btn-orange" name="btn_submit" tabindex="10" type="submit" value="登陆">
                    </div>
                </section>
            </form:form>
        </div>
   </div>
</div>
<footer class="footer">
    <p>
        <a href="/about/about.html">关于我们</a> |
        <a href="/about/contact.html">联系我们</a> |
        <a href="/about/jobs.html">招聘信息</a> |
        <a href="/about/privacy.html">隐私保护</a> |
        <a href="/about/copyright.html">版权声明</a> 
    </p>
    <p class="copyright">Copyright &copy; 2013-2014 ZuJi. All Rights Reserved.</p>
</footer>
</body>
</html>